<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>
        <div class="div1" v-for="(slide,key) in swiperList" :key="key">
          <span>
            <div><img :src="slide.img"></div>
            <div>{{slide.name}}</div>
          </span>
        </div>
      </swiper-slide>
      <div class="swiper-pagination pagination" slot="pagination"></div>
    </swiper>
  </div>

</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
  name: "Classification",
  components:{
    Swiper,
    SwiperSlide
  },
  data(){
    return {
      swiperList :[],
      swiperOption: {
        initialSlide: 0,
        loop: false,//不可以循环轮播
        pagination: { el: '.swiper-pagination' }, // 分页按钮
        paginationClickable: true,
        onSlideChangeEnd: swiper => {
          //console.log('onSlideChangeEnd', swiper.realIndex)
        }
      }
    }
  },
  mounted() {
    this.$axios.get('/classification').then( (result)=>{
      // console.log(result.data)
      this.swiperList=result.data
    }).catch(function (err){
      // console.log(err)
    })
  }
}
</script>

<style scoped>
  *{
    margin-top: 3px;
    background-color: #f8f7f7;
    border-radius: 10px;
  }
  img{
    margin-left: 10px;
    width: 60px;
    height: 60px;
    /*padding: 10px;*/
    border-radius: 50px;
  }
  span{
    margin: 0;
    align-items: center;
    text-align: center;
    font-size: 10px;
    font-family: 方正姚体;
    color: #ff0303;
    width: 25%;
  }
  .div1{
    float: left;
  }
  .pagination {
    position: relative;
    top: 0px;
  }
</style>
